﻿<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

	<title>用户管理</title>

	<script type="text/javascript" th:src="@{/static/html5shiv.js}" ></script>
	<script type="text/javascript"  th:src="@{/static/respond.min.js}"></script>

	<link rel="stylesheet" type="text/css" th:href="@{/static/h-ui/css/H-ui.min.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/static/h-ui.admin/css/H-ui.admin.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/static/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
	<link rel="stylesheet" type="text/css" th:href="@{/static/h-ui.admin/skin/green/skin.css}"id="skin" />
	<link rel="stylesheet" type="text/css" th:href="@{/static/h-ui.admin/css/style.css}" />

	<script type="text/javascript" th:src="@{/static/DD_belatedPNG_0.0.8a-min.js}" ></script>
	<script th:src="@{/static/lib/vue.min.js}"></script>

	<script>DD_belatedPNG.fix('*');</script>

</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 用户中心 <span class="c-gray en">&gt;</span> 用户管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
	<div class="text-c"> 查询条件：
		<select class="input-text" style="width:120px;" onchange="selectOne()">
			<option class="selectOption" value="1" selected >用户名</option>
			<option class="selectOption" value="2">性别</option>
			<option class="selectOption" value="3">手机号</option>
			<option class="selectOption" value="4">身份</option>
		</select>
		<span id="inputSelect" ><!--搜索选项框的切换-->
			<input type="text" class="input-text" style="width:250px" placeholder="输入搜索内容" id="userName" name="userName">
			<input type="text" class="input-text" style="width:250px" placeholder="输入搜索内容" id="userGender" name="userGender" >
			<input type="text" class="input-text" style="width:250px" placeholder="输入搜索内容" id="userPhone" name="userPhone" >
			<input type="text" class="input-text" style="width:250px" placeholder="输入搜索内容" id="userVip" name="userVip" >
		</span>
		<button type="button" class="btn btn-success radius" id="findUser" name=""><i class="Hui-iconfont">&#xe665;</i> 搜用户</button>
	</div>
	<div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
			<a href="javascript:;" id="addUserBtn" class="btn btn-primary radius">
				<i class="Hui-iconfont">&#xe600;</i> 添加用户
			</a>
		</span>
		<span class="r">共有数据：<strong id="countCol"></strong> 条</span></div>
	</div>
	<div class="cl pd-5 bg-1 bk-gray mt-20">

	<div class="mt-20" id="list">
		<table class="table table-border table-bordered table-hover table-bg table-sort">
			<thead>
				<tr class="text-c">
					<th>序号</th>
					<th>用户名</th>
					<th>头像</th>
					<th>性别</th>
					<th>手机</th>
					<th>状态（正常/禁用）</th>
					<th>身份（普通/vip）</th>
					<th>是讲师</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="text-c" v-for="(item,index) in result">
					<td>{{index+1}}</td>
					<td>{{item.userName}}</td>
					<td>{{item.userPhoto}}</td>

					<td v-if="item.userGender==1">男</td>
					<td v-else>女</td>

					<td>{{item.userPhone}}</td>

					<td v-if="item.userState==1">已禁用</td>
					<td v-else>可使用</td>

					<td v-if="item.userVip==1">vip用户</td>
					<td v-else>普通用户</td>

					<td v-if="item.userSign==1">是</td>
					<td v-else>否</td>
					<td class="td-manage">
						<a style="text-decoration:none" v-on:click="unUser(item.userId)" href="javascript:;" title="停用">
                            <i class="Hui-iconfont">&#xe631;</i>
                        </a>
						<a title="编辑" href="javascript:;" v-on:click="editUser(item.userId)" class="ml-5" style="text-decoration:none">
							<i class="Hui-iconfont">&#xe6df;</i>
						</a>
						<a title="删除" href="javascript:;" v-on:click="delUser(item.userId)" class="ml-5" style="text-decoration:none">
							<i class="Hui-iconfont">&#xe6e2;</i>
						</a>
					</td>
				</tr>
			</tbody>
		</table>
		<div id="pagenav">

		</div>
	</div>
</div>

<script type="text/javascript" th:src="@{/static/js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/static/h-ui/js/H-ui.min.js}" ></script>
<script type="text/javascript" th:src="@{/static/h-ui.admin/js/H-ui.admin.js}"></script>

<script type="text/javascript" th:src="@{/static/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" th:src="@{/static/lib/datatables/1.10.0/jquery.dataTables.min.js}"></script>
<script type="text/javascript" th:src="@{/static/lib/laypage/1.2/laypage.js}"></script>

<script type="text/javascript">


	//搜索选项框的显示与隐藏函数调用
	function selectOne() {
		var choosed= $(".selectOption:selected").val();
		if(choosed==1){
			$("#userName").attr("hidden",false).val("");
			$("#userPhone").attr("hidden",true).val("");
			$("#userGender").attr("hidden",true).val("");
			$("#userVip").attr("hidden",true).val("");
		}if(choosed==2){
			$("#userName").attr("hidden",true).val("");
			$("#userPhone").attr("hidden",true).val("");
			$("#userGender").attr("hidden",false).val("");
			$("#userVip").attr("hidden",true).val("");
		}if(choosed==3){
			$("#userName").attr("hidden",true).val("");
			$("#userPhone").attr("hidden",false).val("");
			$("#userGender").attr("hidden",true).val("");
			$("#userVip").attr("hidden",true).val("");
		}if(choosed==4){
			$("#userName").attr("hidden",true).val("");
			$("#userPhone").attr("hidden",true).val("");
			$("#userGender").attr("hidden",true).val("");
			$("#userVip").attr("hidden",false).val("");
		}
	}
	selectOne();

	var app = new Vue({
		el: '#list',
		data: {
			result: []
		}
	});

	//异步展示用户信息
	var getAllUser = function (curr) {
		$.ajax({
			type: 'post',
			dataType: 'json',
			url: '/user/getAllUser',
			data: {
				pageSize: 3,
				pageNum: curr || 1,
				userName:$("#userName").val(),
				userPhone:$("#userPhone").val(),
				userGender:$("#userGender").val(),
				userVip:$("#userVip").val(),
			},
			success: function (data) {
				app.result = data.page.list;
				$("#countCol").html(data.page.total);
				laypage({
					cont: 'pagenav',
					skin: '#4169E1',
					pages: data.totalPage,
					first: '首页',
					last: '尾页',
					curr: curr || 1,
					jump: function (obj, first) {
						if (!first) {
							getAllUser(obj.curr);
						}
					}
				})
			}
		})
	};
	getAllUser();
	$("#findUser").click(function () {
		getAllUser();
	});

	//添加用户
	$("#addUserBtn").on("click",function () {
		layer.open({
			type:2,
			title:'添加用户',
			fix:false,
			maxmin:true,
			shadeClose:true,
			area:['800px','500px'],
			content:'/user/toUserAdd',
			end:function () {
				getAllUser();
			}
		})
	});

	//编辑用户
	function editUser(userId) {
	    console.log("userId====================="+userId)
		layer.open({
			type:2,
			title:'编辑用户',
			maxmin:true,
			shadeClose:true,
			area:['800px','500px'],
			content:'/user/toUserEdit?userId='+userId,
			end:function () {
				getAllUser();
			}
		});
	}

	//删除用户
    function delUser(userId) {
        //询问框
        layer.confirm("确认删除此用户？",{
            //选择按钮
            btn:['确认删除','考虑一下']
        },function () {
            //第一个选项对应内容
            $.ajax({
                type:"post",
                url:"/user/delUser",
                data:{userId:userId},
                success:function (msg) {
                    getAllUser();
                    layer.msg("删除成功！",{icon:5});
                }
            })
        },function () {
            //第二个选项对应内容
        })
    }

    //停用用户
    function unUser(userId) {
        //询问框
        layer.confirm("确认禁用此用户？",{
            //选择按钮
            btn:['确认禁用','考虑一下']
        },function () {
            //第一个选项对应内容
            $.ajax({
                type:"post",
                url:"/user/unUser",
                data:{userId:userId,userState:1},
                success:function (msg) {
                    getAllUser();
                    layer.msg("禁用成功！",{icon:6});
                }
            })
        },function () {
            //第二个选项对应内容
        })
    }

</script> 
</body>
</html>